<template>
	<div class="doc_pc_components_Radio">
		<div>内容: {{value}}</div>
		<div>
			<Radio
				v-model="value"
				label="单选1"
				class="doc-Radio"
			/>
			<Radio
				v-model="value"
				label="单选2"
				class="doc-Radio"
			/>
			<Radio
				v-model="value"
				label="单选3"
				class="doc-Radio"
			/>
			<Radio
				v-model="value"
				label="单选4"
				disabled
				class="doc-Radio"
			/>
		</div>
		<div>
			<Radio
				v-model="value"
				label="单选1"
				color="green"
				class="doc-Radio"
			>插槽1</Radio>
			<Radio
				v-model="value"
				label="单选2"
				color="green"
				class="doc-Radio"
			>插槽2</Radio>
			<Radio
				v-model="value"
				label="单选3"
				color="green"
				class="doc-Radio"
			>插槽3</Radio>
			<Radio
				v-slot="data"
				v-model="value"
				label="单选4"
				color="green"
				disabled
				class="doc-Radio"
			>插槽4-{{data}}</Radio>
		</div>
		<div>
			<Radio
				v-model="value"
				label="单选1"
				color="green"
				size="22"
				class="doc-Radio"
			/>
			<Radio
				v-model="value"
				label="单选2"
				color="green"
				size="22"
				class="doc-Radio"
			/>
			<Radio
				v-model="value"
				label="单选3"
				color="green"
				size="22"
				class="doc-Radio"
			/>
			<Radio
				v-model="value"
				label="单选4"
				color="green"
				size="22"
				disabled
				class="doc-Radio"
			/>
		</div>
		<div>
			<Radio
				v-model="value"
				label="自定义图标1"
				name="单选1"
				class="doc-Radio"
			>
				<template #icon="{active,disabled}">
					<Icon
						:name="active?'bi-check-circle':disabled?'bi-x-circle':'bi-circle'"
					/>
				</template>
			</Radio>
			<Radio
				v-model="value"
				label="自定义图标2"
				name="单选2"
				class="doc-Radio"
			>
				<template #icon="{active,disabled}">
					<Icon
						:name="active?'bi-check-circle':disabled?'bi-x-circle':'bi-circle'"
					/>
				</template>
			</Radio>
			<Radio
				v-model="value"
				label="自定义图标3"
				name="单选3"
				class="doc-Radio"
			>
				<template #icon="{active,disabled}">
					<Icon
						:name="active?'bi-check-circle':disabled?'bi-x-circle':'bi-circle'"
					/>
				</template>
			</Radio>
			<Radio
				v-model="value"
				label="自定义图标4"
				name="单选4"
				disabled
				class="doc-Radio"
			>
				<template #icon="{active,disabled}">
					<Icon
						:name="active?'bi-check-circle':disabled?'bi-x-circle':'bi-circle'"
					/>
				</template>
			</Radio>
		</div>
		<div>内容: {{value2}}</div>
		<div>
			<Radio
				v-model="value2"
				disabled
				label="单选1"
				name="1"
				class="doc-Radio"
			/>
			<Radio
				v-model="value2"
				disabled
				label="单选2"
				name="2"
				class="doc-Radio"
			/>
		</div>
		<div>
			<Radio
				v-model="value2"
				disabled
				name="1"
				class="doc-Radio"
			/>
			<Radio
				v-model="value2"
				name="2"
				class="doc-Radio"
			/>
		</div>
		<div>
			手动控制:
			<Radio
				active
				class="doc-Radio"
			/>
			<Radio
				:active="false"
				class="doc-Radio"
			/>
		</div>
		<div>
			选中前置处理:
			<Radio
				v-model="value3"
				label="单选1"
				:before-active="beforeActive"
				class="doc-Radio"
			/>
			<Radio
				v-model="value3"
				label="单选2"
				:before-active="beforeActive"
				class="doc-Radio"
			/>
		</div>
	</div>
</template>

<script setup>
import {shallowRef} from 'vue';
import {Radio,Icon} from 'powerful-ui/pc-default';

const value=shallowRef('单选4');
const value2=shallowRef('1');
const value3=shallowRef('单选1');

function beforeActive(data){
	console.log('即将选中',data);
	return false;
}
</script>

<style lang="scss">
.doc_pc_components_Radio{
	.doc-Radio{
		margin-right:20px;
	}
	>div{
		margin:20px;
	}
}
</style>